<html>

<head>
    <meta charset="UTF-8">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moolsnet第三方对接数据加密示例</title>
    <script src="./vue3.js"></script>
    <link rel="stylesheet" href="./element-plus.css" />
    <script src="./ElementPlus.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .content {
            background-color: #eee;
            border-left: 5px solid #a8a7a7;
            padding: 10px 8px;
            margin: 10px 0;
        }

        ul {
            margin-left: 20px;
        }

        .showView {
            display: flex;
            background-color: aquamarine;
            width: 100%;
            height: 600px;
            word-wrap: break-word;
        }

        .box:nth-child(2n-1) {
            background-color: rgb(102, 154, 164);
            height: 200px;
            width: 200px;
        }

        .box:nth-child(2n) {
            background-color: orange;
            height: 200px;
            width: 200px;
        }

        h2 {
            padding: 10px 0;
        }
    </style>
</head>

<body>
    <div id="vue">
        <el-container>
            <el-aside width="200px">
                <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                    default-active="2" text-color="#fff" style="height: 100%;">
                    <el-menu-item index="1" @click="choosePage(1)">
                        <span>flex布局</span>
                    </el-menu-item>
                    <el-menu-item index="2" @click="choosePage(2)">
                        <span>flex-direction</span>
                    </el-menu-item>
                    <el-menu-item index="3" @click="choosePage(3)">
                        <span>flex-wrap</span>
                    </el-menu-item>
                    <el-menu-item index="4" @click="choosePage(4)">
                        <span>flex-flow</span>
                    </el-menu-item>
                    <el-menu-item index="5" @click="choosePage(5)">
                        <span>justify-content</span>
                    </el-menu-item>
                    <el-menu-item index="6" @click="choosePage(6)">
                        <span>align-items</span>
                    </el-menu-item>
                    <el-menu-item index="7" @click="choosePage(7)">
                        <span>align-content</span>
                    </el-menu-item>
                    <el-menu-item index="8" @click="choosePage(8)">
                        <span>flex-grow</span>
                    </el-menu-item>
                    <el-menu-item index="9" @click="choosePage(9)">
                        <span>flex-shrink</span>
                    </el-menu-item>
                    <el-menu-item index="10" @click="choosePage(10)">
                        <span>flex-basis</span>
                    </el-menu-item>
                    <el-menu-item index="11" @click="choosePage(11)">
                        <span>flex</span>
                    </el-menu-item>
                    <el-menu-item index="12" @click="choosePage(12)">
                        <span>align-self</span>
                    </el-menu-item>

                </el-menu>
            </el-aside>
            <el-main>
                <!-- flex 布局 -->
                <div v-if="pageIndex===1">
                    <h2>flex 布局</h2>
                    
                    <iframe width="100%" height="100%" src="https://www.w3schools.cn/tryit/tryit.asp"></iframe>
                </div>
                <!-- flex-direction -->
                <div v-if="pageIndex===2">
                    <h2>flex-direction属性 </h2>
                    <span>flex-direction属性决定主轴的方向（即项目的排列方向）</span>
                    <div class="content">
                        <p>.box {</p>
                        <p> &nbsp; &nbsp;&nbsp;&nbsp;flex-direction: row | row-reverse | column | column-reverse;</p>
                        <p>}</p>
                    </div>
                    <ul>
                        <li>row（默认值）：主轴为水平方向，起点在左端</li>
                        <li>row-reverse：主轴为水平方向，起点在右端</li>
                        <li>column：主轴为垂直方向，起点在上沿</li>
                        <li>column-reverse：主轴为垂直方向，起点在下沿</li>
                    </ul>
                    <div>
                        <h3 style="margin: 20px 0;">点击修改flex-direction:</h3>
                        <el-button plain type="primary" @click="showView.flexDirection='row'">row</el-button>
                        <el-button plain type="primary"
                            @click="showView.flexDirection='row-reverse'">row-reverse</el-button>
                        <el-button plain type="primary" @click="showView.flexDirection='column'">column</el-button>
                        <el-button plain type="primary"
                            @click="showView.flexDirection='column-reverse'">column-reverse</el-button>
                        <el-button plain type="primary" @click="showView.flexDirection=''">清除样式</el-button>
                    </div>

                </div>
                <!-- flex-wrap -->
                <div v-if="pageIndex===3">
                    <h2>flex-wrap属性</h2>
                    <span>
                        flex-wrap属性定义，如果一条轴线排不下，如何换行
                    </span>
                    <div class="content">
                        <p>.box {</p>
                        <p> &nbsp; &nbsp;&nbsp;&nbsp;flex-wrap: nowrap | wrap | wrap-reverse;</p>
                        <p>}</p>
                    </div>
                    <ul>
                        <li>nowrap（默认）：不换行</li>
                        <li>wrap：换行，第一行在上方</li>
                        <li>wrap-reverse：换行，第一行在下方</li>
                    </ul>
                    <div>
                        <h3 style="margin: 20px 0;">点击修改flex-wrap:</h3>
                        <el-button plain type="primary" @click="showView.flexWrap='nowrap'">nowrap</el-button>
                        <el-button plain type="primary" @click="showView.flexWrap='wrap'">wrap</el-button>
                        <el-button plain type="primary"
                            @click="showView.flexWrap='wrap-reverse'">wrap-reverse</el-button>
                        <el-button plain type="primary" @click="showView.flexWrap=''">清除样式</el-button>
                    </div>
                </div>
                <!-- flex-flow -->
                <div v-if="pageIndex===4">
                    <h2>flex-flow属性</h2>
                    <span>flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap</span>
                    <div class="content">
                        <p>.box {</p>
                        <p> &nbsp; &nbsp;&nbsp;&nbsp;flex-flow: flex-direction flex-wrap;</p>
                        <p>}</p>
                    </div>
                </div>
                <!-- justify-content -->
                <div v-if="pageIndex===5">
                    <h2>justify-content属性</h2>
                    <span>
                        justify-content属性定义了项目在主轴上的对齐方式
                    </span>
                    <div class="content">
                        <p>.box {</p>
                        <p> &nbsp; &nbsp;&nbsp;&nbsp;justify-content: flex-start | flex-end | center | space-between |
                            space-around;</p>
                        <p>}</p>
                    </div>
                    <ul>
                        <li>flex-start（默认值）：左对齐</li>
                        <li>flex-end：右对齐</li>
                        <li>center： 居中</li>
                        <li>space-between：两端对齐，项目之间的间隔都相等</li>
                        <li>space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍</li>
                    </ul>
                    <div>
                        <h3 style="margin: 20px 0;">点击修改justify-content:</h3>
                        <el-button plain type="primary"
                            @click="showView.justifyContent='flex-start'">flex-start</el-button>
                        <el-button plain type="primary" @click="showView.justifyContent='flex-end'">flex-end</el-button>
                        <el-button plain type="primary" @click="showView.justifyContent='center'">center</el-button>
                        <el-button plain type="primary"
                            @click="showView.justifyContent='space-between'">space-between</el-button>
                        <el-button plain type="primary"
                            @click="showView.justifyContent='space-around'">space-around</el-button>
                        <el-button plain type="primary" @click="showView.justifyContent=''">清除样式</el-button>
                    </div>
                </div>
                <!-- align-items -->
                <div v-if="pageIndex==6">
                    <h2>align-items属性</h2>
                    <span>
                        align-items属性定义项目在交叉轴上如何对齐
                    </span>
                    <div class="content">
                        <p>.box {</p>
                        <p> &nbsp; &nbsp;&nbsp;&nbsp;align-items: flex-start | flex-end | center | baseline | stretch;
                        </p>
                        <p>}</p>
                    </div>
                    <ul>
                        <li>flex-start：交叉轴的起点对齐</li>
                        <li>flex-end：交叉轴的终点对齐</li>
                        <li>center：交叉轴的中点对齐</li>
                        <li>baseline: 项目的第一行文字的基线对齐</li>
                        <li>stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度</li>
                    </ul>
                    <div>
                        <h3 style="margin: 20px 0;">点击修改align-items:</h3>
                        <el-button plain type="primary" @click="showView.alignItems='flex-start'">flex-start</el-button>
                        <el-button plain type="primary" @click="showView.alignItems='flex-end'">flex-end</el-button>
                        <el-button plain type="primary" @click="showView.alignItems='center'">center</el-button>
                        <el-button plain type="primary" @click="showView.alignItems='baseline'">baseline</el-button>
                        <el-button plain type="primary" @click="showView.alignItems='stretch'">stretch</el-button>
                        <el-button plain type="primary" @click="showView.alignItems=''">清除样式</el-button>
                    </div>
                </div>
                <!-- align-content -->
                <div v-if="pageIndex==7">
                    <h2>align-content属性</h2>
                    <span>
                        定义了多根轴线的对齐方式,如果项目只有一根轴线，该属性不起作用
                    </span>
                    <div class="content">
                        <p>.box {</p>
                        <p> &nbsp; &nbsp;&nbsp;&nbsp;align-content: flex-start | flex-end | center | space-between |
                            space-around | stretch;
                        </p>
                        <p>}</p>
                    </div>
                    <div>
                        <h3 style="margin: 20px 0;">点击修改align-items:</h3>
                        <el-button plain type="primary"
                            @click="showView.alignContent='flex-start'">flex-start</el-button>
                        <el-button plain type="primary" @click="showView.alignContent='flex-end'">flex-end</el-button>
                        <el-button plain type="primary" @click="showView.alignContent='center'">center</el-button>
                        <el-button plain type="primary"
                            @click="showView.alignContent='space-between'">space-between</el-button>
                        <el-button plain type="primary"
                            @click="showView.alignContent='space-around'">space-around</el-button>
                        <el-button plain type="primary" @click="showView.alignContent='stretch'">stretch</el-button>
                        <el-button plain type="primary" @click="showView.alignContent=''">清除样式</el-button>
                    </div>
                </div>
                <!-- flex-grow -->
                <div v-if="pageIndex==8">
                    <h2>flex-grow属性</h2>
                    <span>
                        flex-grow属性定义项目的放大比例(如果其他盒子都不设置该属性，只有一个盒子设置，则该盒子会撑开剩下的宽带)
                    </span>
                    <div>
                        <h3 style="margin: 20px 0;">点击修改flex-grow:</h3>
                        <el-button plain type="primary" @click="showView.flexGrow1=1">子盒子1=1</el-button>
                        <el-button plain type="primary" @click="showView.flexGrow2=1">子盒子2=1</el-button>
                        <el-button plain type="primary" @click="deleteView()">清除样式</el-button>
                    </div>
                </div>
                <!-- flex-shrink属性 -->
                <div v-if="pageIndex==9">
                    <h2>flex-shrink属性</h2>
                    <span>
                        定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
                        <p>
                            如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小
                        </p>
                    </span>

                    <div>
                        <h3 style="margin: 20px 0;">点击修改flex-shrink:</h3>
                        <el-button plain type="primary" @click="showView.flexShrink=1">子盒子全为1</el-button>
                        <el-button plain type="primary" @click="showView.flexShrink1=0">子盒子1=0</el-button>
                        <el-button plain type="primary" @click="deleteView2()">清除样式</el-button>
                    </div>
                </div>
                <!-- flex-basis -->
                <div v-if="pageIndex==10">
                    <h2>flex-basis属性</h2>
                    <span>
                        定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小,默认值为auto
                    </span>

                </div>
                <!-- flex属性 -->
                <div v-if="pageIndex==11">
                    <h2> flex属性</h2>
                    <span>
                        flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto,后两个属性可选
                    </span>

                </div>
                <!-- align-self属性 -->
                <div v-if="pageIndex==12">
                    <h2>align-self属性</h2>
                    <span>
                        align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，
                        表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
                    </span>
                </div>

                <p v-show="pageIndex!=1" style="margin: 20px 0;font-size: 10px;"> 注： 父盒子 {
                    display: flex;
                    background-color: aquamarine;
                    margin: 30px 0;
                    padding: 30px;<br />
                    {{showView.flexDirection?'flex-direction:'+showView.flexDirection+';':showView.flexDirection}}
                     {{showView.flexWrap ?'flex-wrap: '+ showView.flexWrap+';':showView.flexWrap}}
                    {{showView.flexDirection ?'flex-flow: '+ showView.flexDirection +';':showView.flexDirection}}
                    {{showView.justifyContent ?'justify-content: '+ showView.justifyContent +';':showView.justifyContent}}
                    {{showView.alignItems ?'align-items: '+ showView.alignItems+';':showView.alignItems}}
                    {{showView.alignContent ?'align-content: '+ showView.alignContent+';':showView.alignContent}}<br />

                    <!-- {{showView.flexDirection ?'flex-grow: '+ +';':}};
                    {{showView.flexDirection ?'flex-shrink: '+ +';':}};
                    {{showView.flexDirection ?'flex-basis: '+ +';':}};
                    {{showView.flexDirection ?'flex: '+ +';':}};
                    {{showView.flexDirection ?'align-self: '+ +';':}}; -->

                    }
                </p>
                <div v-show="pageIndex!=1" class="showView" :style="{flexDirection:showView.flexDirection,flexWrap:showView.flexWrap,
                    justifyContent:showView.justifyContent,alignItems:showView.alignItems,
                    alignContent:showView.alignContent}">
                    <div class="box"
                        :style="{flexGrow:showView.flexGrow1,flexShrink:showView.flexShrink1==0?showView.flexShrink1:showView.flexShrink}">
                        1</div>
                    <div class="box" :style="{flexGrow:showView.flexGrow2,flexShrink:showView.flexShrink}">2</div>
                    <div class="box" :style="{flexShrink:showView.flexShrink}">3</div>
                    <div class="box" :style="{flexShrink:showView.flexShrink}">4</div>
                    <div class="box" :style="{flexShrink:showView.flexShrink}">5</div>
                    <div class="box" :style="{flexShrink:showView.flexShrink}">6</div>
                    <div class="box" :style="{flexShrink:showView.flexShrink}">7</div>
                    <div class="box" :style="{flexShrink:showView.flexShrink}">8</div>
                    <div class="box" :style="{flexShrink:showView.flexShrink}">9</div>
                    <div class="box" :style="{flexShrink:showView.flexShrink}"></div>
                </div>
            </el-main>
        </el-container>
    </div>

</body>

<script>
    const htmls = {
        data() {
            return {
                pageIndex: 1,
                choosePage(key) {
                    console.log(key);
                    this.pageIndex = key;
                },
                showView: {
                    flexDirection: '',
                    flexWrap: 'wrap',
                    justifyContent: '',
                    alignItems: '',
                    alignContent: '',
                    flexGrow1: '',
                    flexGrow2: '',
                    flexShrink: '',
                    flexShrink1: '',
                },
                showView2:"",
                deleteView() {
                    this.showView.flexGrow1 = ''
                    this.showView.flexGrow2 = ''
                },
                deleteView2() {
                    this.showView.flexShrink = ''
                    this.showView.flexShrink1 = ''
                },
                rhtml: "<h1>html页面中引用VUE3的演示页面</h1>",

            }
        }
    }
    const app = Vue.createApp(htmls)
    // 简单语法注册或获取全局组件.注册还会自动使用给定的 id 设置组件的名称
    // app.component('props-demo-simple', {
    //     data() {
    //         return {
    //             count: 0
    //         }
    //     },
    //     props: ['size', 'myMessage'],
    //     template: `<button v-on:click="count++">
    //                 You clicked me {{ count }} times.
    //                 </button>`
    // }
    // )
    app.use(ElementPlus)
    app.mount("#vue")


</script>